<template>
	<view>
		<view class="cu-bar search">
			<view class="search-form round shadow">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="搜索我的订单" confirm-type="search"></input>
			</view>
			<view class="action">
				<navigator url="result">
					<button class="cu-btn bg-red shadow-blur round">搜索</button>
				</navigator>
			</view>
		</view>

		<scroll-view scroll-y="true" class="nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="[index==TabCur ? 'text-red cur' : '']" @tap="tabSelect" v-for="(item,index) in orderItems"
				 :key="index" :data-id="index">{{item.name}}</view>
			</view>
		</scroll-view>

		<block v-for="(item,index) in 4" :key="index">
			<view class="cu-card menu">
				<view class="cu-item shadow">
					<view class="flex flex-sub justify-between align-center padding solid-bottom">
						<text>2019-10-15 16:11:45</text>
						<text class="text-red">待付款</text>
					</view>
					<view class="flex padding align-start">
						<image class="item-image" :src="logo" mode=""></image>
						<view class="flex flex-sub justify-between align-start padding-left-sm">
							<view style="width: 400upx;">待付款待付款待付款待付款待付款款待付款款待付款</view>
							<view class="flex flex-direction justify-end align-end text-gray">
								<text class="text-price text-lg">599</text>
								<text class="padding-top-xs">x3</text>
							</view>
						</view>
					</view>
					<view class="padding-right padding-bottom-sm text-right">共1件商品，总金额<text class="text-price text-red text-bold text-lg padding-left-xs">599</text></view>
					<view class="flex justify-end padding-tb-sm padding-right solid-top">
						<button class="cu-btn line-gray round">取消订单</button>
						<button class="cu-btn bg-red round margin-left-xs">立即付款</button>
					</view>
				</view>
			</view>
		</block>
		<view class="line"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logo: this.$api.logo,
				TabCur: 0,
				orderItems: [{
					name: '全部',
					icon: 'pay',
					status: 0
				}, {
					name: '待付款',
					icon: 'pay',
					status: 1
				}, {
					name: '待发货',
					icon: 'send',
					status: 2
				}, {
					name: '待收货',
					icon: 'deliver',
					status: 3
				}, {
					name: '待评价',
					icon: 'comment',
					status: 4
				}, ],
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id
			},
		}
	}
</script>

<style lang="scss">
	.line {
		height: 50upx;
	}
	.item-image {
		width: 130upx;
		height: 130upx;
	}
	.cu-card>.cu-item {
		margin: 30upx 30upx 0;
	}
</style>
